<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ckform.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
    <style type="text/css">
        body {
            font-size: 20px;
            padding-bottom: 40px;
            background-color: #e9e7ef;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        @media ( max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>
    <script>

        $(function () {
            loadData();
        })
        function loadData() {
            $.ajax({
                url:"${pageContext.request.contextPath}/btype/getBigCategory",
                type:"post",
                dataType:"json",
                cache:false,
                success:function (rs) {
                    $("#tbody").empty();
                    $.each(rs,function (index,element) {
                        var tr="<tr>\n" +
                            "            <td width='150px'>"+element.typename+"</td>\n" +
                            "            <td>"+element.typedes+"</td>\n" +
                            "            <td>\n" +
                            "                <select id=\"smallBType"+index+"\">\n" +
                            "               </select>\n" +
                            "            </td>\n" +
                            "            <td width='80px'>\n" +
                            "                <button type=\"submit\"><a href=\"${pageContext.request.contextPath}/btype/subtype_list?typeid="+element.typeid+"\">管理小类</a></button>\n" +
                            "            </td>\n" +
                            "            <td width='60px'>\n" +
                            "                <button type=\"submit\"><a href=\"${pageContext.request.contextPath}/btype/type_update?typeid="+element.typeid+"\">修改</a></button>\n" +
                            "            </td>\n" +
                            "            <td width='60px'>\n" +
                            "                <button type=\"submit\"><a href=\"javascript:deleteBtypeBig("+element.typeid+")\">删除</a></button>\n" +
                            "            </td>\n" +
                            "        </tr>";
                        $("#tbody").append(tr);

                        $.each(element.subBtypeList,function (index1,element2) {
                            var option = "<option>"+element2.typename+"</option>"
                            $("#smallBType"+index).append(option);
                        })
                    });
                }
            });
        }
        function deleteBtypeBig(typeid) {
                $.ajax({
                    url:"${pageContext.request.contextPath}/btype/deleteBtypeBig",
                    type:"post",
                    data:{"typeid":typeid},
                    dataType: "json",
                    cache:false,
                    success:function (rs) {
                        if (rs.status==200){
                            alert(rs.msg);
                            loadData();
                        }else{
                            alert(rs.msg);
                        }
                    }

                })
        }

    </script>
</head>
<body>
<form class="form-inline definewidth m20" action="#" method="get">
    <font color="#777777"><strong>大类信息：</strong></font>

</form>
<table class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
        <th>大类名称</th>
        <th>类别描述</th>
        <th>查看小类</th>
        <th>小类管理</th>
        <th>修改</th>
        <th>删除</th>
    </tr>
    </thead>
    <tbody id="tbody">
        <%--存放数据行--%>

    </tbody>

</table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="addnew">
    <a href="${pageContext.request.contextPath}/btype/type_add">添加大类</a>
</button>
</body>
</html>